<template>
  <div style="height: 100%">
    <div class="searchList">
      <div class="row">
        <field
          class="leftField"
          right-icon="arrow-down"
          readonly
          clickable
          name="picker"
          :value="searchForm.room"
          label-width="30px"
          label="区域"
          placeholder="选择区域"
          @click="showPickerRoom = true"
        ></field>
        <popup v-model="showPickerRoom" position="bottom">
          <picker
            show-toolbar
            :columns="columnsRoom"
            @confirm="onConfirmRoom"
            @cancel="showPickerRoom = false"
          />
        </popup>
        <field
          class="rightField"
          right-icon="arrow-down"
          readonly
          clickable
          name="picker"
          :value="searchForm.floor"
          label-width="60px"
          label-position="right"
          label="楼层"
          placeholder="选择楼层"
          @click="showPickerFloor = true"
        />
        <popup v-model="showPickerFloor" position="bottom">
          <picker
            show-toolbar
            :columns="columnsFloor"
            @confirm="onConfirmFloor"
            @cancel="showPickerFloor = false"
          />
        </popup>
      </div>
      <div class="rowExample">
        <div class="example">
          <icon name="stop" color="#1E9BFA" size="25" />
          <div class="normalContent">正常</div>
        </div>
        <!--        <div class="example">-->
        <!--          <icon name="stop" color="#FC5A69" size="25" />-->
        <!--          <div class="normalContent">告警</div>-->
        <!--        </div>-->
        <!--        <div class="example">-->
        <!--          <icon name="stop" color="#46fa1e" size="25" />-->
        <!--          <div class="normalContent">开启</div>-->
        <!--        </div>-->
        <!--        <div class="example">-->
        <!--          <icon name="stop" color="#895e14" size="25" />-->
        <!--          <div class="normalContent">关闭</div>-->
        <!--        </div>-->
        <div class="example">
          <icon name="stop" color="#808080" size="25" />
          <div class="normalContent">离线</div>
        </div>
      </div>
    </div>
    <div class="contentList">
      <div class="listAll">
        <pull-refresh v-model="refreshing" @refresh="onRefresh">
          <list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <template v-for="(item, index) in list">
              <div class="itemWrap" :key="index">
                <div class="title">
                  <van-row type="flex" align="center">
                    <van-col span="3"
                      ><div class="iconWrap">
                        <icon
                          name="stop"
                          :color="item.equipmentState | squareColor"
                          size="25"
                        /></div
                    ></van-col>
                    <van-col span="12"
                      ><h1>{{ item.equipmentAddr }}</h1></van-col
                    >
                    <!--                    <van-col span="5"><div class="normalContent">净化设备</div></van-col>-->
                    <!--                    <van-col span="3" v-if="item.airCleanerInfo"><div class="normalContent" :class="item.airCleanerInfo.airCleanerState | cleanDeviceStateColor">{{ item.airCleanerInfo.airCleanerState | cleanDeviceState }}</div></van-col>-->
                    <van-col
                      span="3"
                      offset="7"
                      v-if="
                        item.controlDeviceList && item.controlDeviceList.length
                      "
                    >
                      <div class="checkBox">
                        <!-- <checkbox
                          v-model="item.selected"
                          shape="square"
                        ></checkbox> -->
                        <!-- <van-switch
                          :active-value="1"
                          @change="
                            _ =>
                              changeAir(
                                item.controlDeviceList[0],
                                item.controlDeviceList[0].controlDeviceState
                              )
                          "
                          :inactive-value="0"
                          inactive-color="#ddd"
                          v-model="item.controlDeviceList[0].controlDeviceState"
                        ></van-switch> -->
                      </div>
                    </van-col>
                    <!--                    <van-col span="5" v-if="!item.airCleanerInfo"><div class="normalContent">&#45;&#45;</div></van-col>-->
                  </van-row>
                  <divider></divider>
                </div>
                <div class="content">
                  <van-row type="flex" align="center">
                    <van-col span="3"
                      ><div class="normalContent">温度</div></van-col
                    >
                    <van-col span="5"
                      ><div class="normalContent blue">
                        {{ item.content.temp_Rtd || "--" }}℃
                      </div></van-col
                    >
                    <van-col span="3"
                      ><div class="normalContent">CO₂</div></van-col
                    >
                    <van-col span="2"
                      ><div class="iconWrap" v-if="item.content.co2_Rtd">
                        <!-- <icon
                          name="stop"
                          :color="item.content.co2_Rtd | squareColor"
                          size="25"
                        /> -->
                      </div></van-col
                    >
                    <van-col span="4"
                      ><div class="normalContent">
                        {{ item.content.co2_Rtd || "--" }}
                      </div></van-col
                    >
                    <van-col span="2"
                      ><div class="normalContent">甲醛</div></van-col
                    >
                    <van-col span="2"
                      ><div class="iconWrap" v-if="item.content.voc_Rtd">
                        <!-- <icon
                          name="stop"
                          :color="item.content.voc_Rtd | squareColor"
                          size="25"
                        /> -->
                      </div></van-col
                    >
                    <van-col span="3"
                      ><div class="normalContent">
                        {{ item.content.voc_Rtd || "--" }}
                      </div></van-col
                    >
                  </van-row>
                </div>
                <div class="content">
                  <van-row type="flex" align="center">
                    <van-col span="3"
                      ><div class="normalContent">湿度</div></van-col
                    >
                    <van-col span="5"
                      ><div class="normalContent blue">
                        {{ item.content.humi_Rtd || "--" }}%
                      </div></van-col
                    >
                    <van-col span="3"
                      ><div class="normalContent">PM2.5</div></van-col
                    >
                    <van-col span="2"
                      ><div class="iconWrap" v-if="item.content.pm25_Rtd">
                        <!-- <icon
                          name="stop"
                          :color="item.content.pm25_Rtd | squareColor"
                          size="25"
                        /> -->
                      </div></van-col
                    >
                    <van-col span="4"
                      ><div class="normalContent">
                        {{ item.content.pm25_Rtd || "--" }}
                      </div></van-col
                    >
                    <van-col span="2"
                      ><div class="normalContent">TVoc</div></van-col
                    >
                    <van-col span="2"
                      ><div class="iconWrap" v-if="item.content.voc_Rtd">
                        <icon
                          name="stop"
                          :color="item.content.voc_Rtd | squareColor"
                          size="25"
                          style="opacity: 0;"
                        /></div
                    ></van-col>
                    <van-col span="3"
                      ><div class="normalContent">
                        {{ item.content.voc_Rtd || "--" }}
                      </div></van-col
                    >
                  </van-row>
                  <divider></divider>
                </div>
                <div class="content controlDeviceList">
                  <van-row
                    :key="arrIndex"
                    v-for="(arr, arrIndex) in splitArr(
                      item.controlDeviceList,
                      2
                    )"
                    type="flex"
                    align="center"
                  >
                    <template v-for="item2 in arr">
                      <van-col span="6">
                        <div class="normalContent">净化设备</div>
                      </van-col>
                      <!-- <van-col class="normalContent" :span="6">
                        <div style="display: flex;justify-content: center;">
                          <van-switch
                            :active-value="1"
                            @change="changeAir(item2)"
                            :inactive-value="0"
                            inactive-color="#ddd"
                            v-model="item2.controlDeviceState"
                          ></van-switch>
                        </div>
                      </van-col> -->
                      <van-col
                        style="display: flex;align-items: center;justify-content: center;"
                        span="2"
                        @click="changeAir(item2)"
                      >
                        <img
                          v-if="item2.controlDeviceState === 0"
                          src="../../assets/images/Device/closeImg.png"
                          height="17"
                        />
                        <img
                          v-else
                          src="../../assets/images/Device/openImg.png"
                          height="17"
                        />
                      </van-col>
                      <van-col @click="changeAir(item2)" span="4">
                        <div
                          class="normalContent"
                          :class="item2.airCleanerState | cleanDeviceStateColor"
                        >
                          {{ item2.controlDeviceState === 1 ? "开启" : "关闭" }}
                        </div>
                      </van-col>
                    </template>
                  </van-row>
                </div>
              </div>
            </template>
          </list>
        </pull-refresh>
      </div>
    </div>
    <!-- <div class="btnGroupWrap">
      <van-button type="primary" @click="openAir">打开</van-button>
      <van-button type="danger" @click="closeAir">关闭</van-button>
    </div> -->
  </div>
</template>

<script>
import {
  Switch,
  Field,
  Popup,
  Picker,
  List,
  PullRefresh,
  Row,
  Col,
  Icon,
  Checkbox,
  Divider,
  Button,
  Toast
} from "vant";
import { getDevicePage, airSwitchControlInMobile } from "@/api/Air";
export default {
  name: "overview",
  components: {
    Field,
    Popup,
    Picker,
    List,
    PullRefresh,
    VanRow: Row,
    VanCol: Col,
    Icon,
    Checkbox,
    Divider,
    VanSwitch: Switch,
    VanButton: Button
  },
  data() {
    return {
      deviceNumList: [],
      columnsRoom: ["全部", "A区", "B区", "C区", "D区", "I区"],
      columnsFloor: ["全部", "G", "1F", "2F", "3F", "4F"],
      showPickerRoom: false,
      showPickerFloor: false,
      searchForm: {
        room: "全部",
        floor: "全部"
      },
      // 下面部分
      pageInfo: {
        pageNum: 0,
        pageSize: 10
      },
      list: [],
      loading: false,
      finished: false,
      refreshing: false
    };
  },
  mounted() {},
  watch: {
    searchForm: {
      handler(v) {
        this.onRefresh();
      },
      deep: true
    }
  },
  filters: {
    squareColor(v) {
      let result = "";
      switch (v) {
        case "优":
        case 0: // 正常
          result = "#1E9BFA";
          break;
        case "差":
        case 1: // 告警
          result = "#FC5A69";
          break;
        case "良":
        // case 2: // 开启
        //   result = "#46fa1e";
        //   break;
        case 3: // 关闭
          result = "#895e14";
          break;
        case 2: // 离线
          result = "#808080";
          break;
        default:
          break;
      }
      return result;
    },
    squareColor2(v) {
      let result = "";
      switch (v) {
        case "优":
          result = "#1E9BFA";
          break;
        case "差":
          result = "#FC5A69";
          break;
        case "良":
          result = "#1E9BFA";
          break;
        default:
          break;
      }
      return result;
    },
    cleanDeviceStateColor(v) {
      let result = "";
      switch (v) {
        case 0:
          result = "gray";
          break;
        case 1:
          result = "red";
          break;
        case 2:
          result = "blue";
          break;
        case 3:
          result = "gray";
          break;
        case 4:
          result = "gray";
          break;
        default:
          break;
      }
      return result;
    },
    cleanDeviceState(v) {
      let result = "";
      switch (v) {
        case 0:
          result = "关闭";
          break;
        case 1:
          result = "告警";
          break;
        case 2:
          result = "开启";
          break;
        case 3:
          result = "关闭";
          break;
        case 4:
          result = "离线";
          break;
        default:
          break;
      }
      return result;
    }
  },
  methods: {
    splitArr(arr, n) {
      return arr.reduce((pre, curr, index) => {
        if (index % n === 0) pre.push([]);
        pre[Math.floor(index / n)].push(curr);
        return pre;
      }, []);
    },
    async changeAir(item) {
      let { code, data } = await airSwitchControlInMobile({
        openOrOff: item.controlDeviceState ? 0 : 1,
        eqptId: item.eqptId,
        serialNumber: item.deviceNumber,
        downLinkType: 0
      });
      if (code === 0) {
        item.controlDeviceState = item.controlDeviceState ? 0 : 1;
        Toast.success((item.controlDeviceState ? "关闭" : "开启") + "成功");
      }
      if (code !== 0) {
        Toast.fail((item.controlDeviceState ? "关闭" : "开启") + "失败");
        // item.controlDeviceState = item.controlDeviceState === 0 ? 1 : 0;
      }
    },
    // openAir() {
    //   console.log(this.list);
    //   let selectedList = [];
    //   for (let i of this.list) {
    //     if (i.selected && i.selected === true) {
    //       i.airCleanerInfoList.forEach(i2 => {
    //         selectedList.push(i2.airCleanerNum);
    //       });
    //       // selectedList.push(i.airCleanerInfo.airCleanerNum)
    //     }
    //   }
    //   if (!selectedList.length) {
    //     Toast.fail("请先选择设备");
    //     return;
    //   }
    //   airSwitchControlInMobile({
    //     equipmentNumList: selectedList,
    //     open: true
    //   }).then(res => {
    //     if (res.code === 0) {
    //       Toast.success("设置成功");
    //       this.onRefresh();
    //     } else {
    //       Toast.fail(res.msg);
    //     }
    //   });
    // },
    // closeAir() {
    //   let selectedList = [];
    //   for (let i of this.list) {
    //     if (i.selected && i.selected === true) {
    //       i.airCleanerInfoList.forEach(i2 => {
    //         selectedList.push(i2.airCleanerNum);
    //       });
    //       // selectedList.push(i.airCleanerInfo.airCleanerNum)
    //     }
    //   }
    //   if (!selectedList.length) {
    //     Toast.fail("请先选择设备");
    //     return;
    //   }
    //   airSwitchControlInMobile({
    //     equipmentNumList: selectedList,
    //     open: false
    //   }).then(res => {
    //     if (res.code === 0) {
    //       Toast.success("设置成功");
    //       this.onRefresh();
    //     } else {
    //       Toast.fail(res.msg);
    //     }
    //   });
    // },
    async search(pageNum) {
      let res = await getDevicePage({
        equipmentTypeId: this.$route.query.equipmentTypeId,
        building:
          this.searchForm.room === "全部" ? undefined : this.searchForm.room,
        floor:
          this.searchForm.floor === "全部" ? undefined : this.searchForm.floor,
        pageNum,
        pageSize: this.pageInfo.pageSize
      });
      if (res.code === 0) {
        res.data.records.forEach(item => {
          this.list.push(Object.assign({}, item));
        });
        this.columnsRoom = ["全部"].concat(res.data.buildings);
        this.columnsFloor = ["全部"].concat(res.data.floors);
        this.count = this.list.length;
        this.totalCount = res.data.total;
        this.loading = false;
        if (this.count >= this.totalCount) {
          this.finished = true;
        }
      }
    },
    onConfirmRoom(value) {
      this.searchForm.room = value;
      this.showPickerRoom = false;
    },
    onConfirmFloor(value) {
      this.searchForm.floor = value;
      this.showPickerFloor = false;
    },
    getListAll(pageInfo, callback) {
      let listAdd = [];
      for (let i = 1; i <= 10; i++) {
        listAdd.push((pageInfo.pageNum - 1) * 10 + i);
      }
      callback(listAdd);
    },
    onLoad() {
      setTimeout(() => {
        this.pageInfo.pageNum++;
        this.search(this.pageInfo.pageNum);
      }, 1000);
    },
    onRefresh() {
      this.pageInfo.pageNum = 0;
      this.list = [];
      // 清空列表数据
      this.finished = false;
      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.onLoad();
      this.refreshing = false;
    }
  }
};
</script>

<style lang="scss" scoped>
.searchList {
  width: 100%;
  .row {
    display: flex;
  }
  .rowExample {
    padding: 10px 10px 0 10px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-around;
    pointer-events: none;
    .example {
      display: flex;
      align-items: center;
      .normalContent {
        font-size: 10px;
        font-family: PingFang SC Medium, PingFang SC Medium-Medium;
        font-weight: 400;
        color: #666666;
      }
    }
  }
  .equipType {
    padding: 10px 10px 10px 0 !important;
    /deep/ .van-field__control {
      border-radius: 5px !important;
    }
  }
  /*height: 150px;*/
  .van-cell {
    position: unset;
    border: none;
    background: transparent;
    /deep/ .van-field__label {
      text-align: right;
      color: white;
    }
    /deep/ .van-field__control {
      background-color: white;
      color: #666666;
      border-radius: 5px 0 0 5px;
      box-sizing: border-box;
      padding-left: 10px;
    }
  }
  .rightField {
    padding: 10px 18px 10px 0;
    width: 52%;
  }
  .leftField {
    padding-left: 10px;
    width: 45%;
  }
}
/deep/ .van-field__right-icon {
  background: white !important;
  padding: 0 4px 0 0;
  border-radius: 0 5px 5px 0;
  color: #fc5a69;
}
.tabNav {
  margin-bottom: 5px;
  /deep/ .van-tabs__wrap {
    width: 90%;
    margin-left: 5%;
    border-radius: 5px;
    box-shadow: 0px 1px 2px 0px #cccccc;
  }
  /deep/ .van-tabs__line {
    background-color: #fc5a69;
  }
}
.contentList {
  margin-top: 30px;
  padding: 0 5%;
  height: calc(100% - 120px);
  .listAll {
    height: 100%;
    overflow: scroll;
  }
}
.itemWrap {
  width: 100%;
  min-height: 150px;
  padding: 5%;
  box-sizing: border-box;
  border-radius: 5px;
  background: white;
  background-size: auto 100%;
  /*box-shadow: 0px 1px 2px 0px #cccccc;*/
  margin-bottom: 15px;
  .iconWrap {
    display: flex;
    align-items: center;
  }
  .normalContent {
    font-size: 10px;
    font-family: PingFang SC Medium, PingFang SC Medium-Medium;
    font-weight: 400;
    color: #666666;
  }
  .blue {
    color: #1e9bfa;
  }
  .green {
    color: #4aedd0;
  }
  .red {
    color: #fc5a69;
  }
  .gray {
    color: #808080;
  }
  .title {
    h1 {
      font-size: 15px;
      font-family: PingFang SC Bold, PingFang SC Bold-Bold;
      font-weight: 600;
      color: #333333;
    }
    .checkBox {
      /deep/ .van-switch {
        font-size: 15px;
        // border: 1px solid #2eb0fc;
      }
    }
  }
}
.btnGroupWrap {
  position: fixed;
  bottom: 50px;
  width: 100%;
  height: 45px;
  background: white;
  display: flex;
  justify-content: center;
  align-items: center;
  .van-button--normal {
    width: 30%;
    height: 30px;
    border-radius: 15px;
    font-size: 15px;
    font-family: PingFang SC Medium, PingFang SC Medium-Medium;
    font-weight: 500;
    color: #ffffff;
    letter-spacing: 3px;
    border: none;
  }
  .van-button--primary {
    background: linear-gradient(#58e9ff 0%, #1e9bfa 100%);
    box-shadow: 0px 1px 2px #226eaf;
  }
  .van-button--danger {
    background: linear-gradient(#ff89a5 0%, #fc5a69 100%);
    box-shadow: 0px 1px 2px #d93e3e;
    margin-left: 10%;
  }
}
.van-divider {
  margin: 5px 0;
}
.controlDeviceList {
  min-height: 30px;
  line-height: 30px;
  /deep/ .van-switch {
    font-size: 15px;
    // border: 1px solid #2eb0fc;
  }
}
</style>
